<template>
  <div class="serch">
    <search @on-submit="onSubmit" v-model="value" :auto-fixed="false" @on-cancel="onCancel"></search>
    <div class="dtl" style="margin-bottom: 50px;">
      <swipeout>
        <flexbox orient="vertical">
          <flexbox-item v-for="item in results" :key="item">
            <div class="flex-demo">
              <swipeout-item transition-mode="follow">
                <div slot="right-menu">
                  <swipeout-button @click.native="onDel(item.id)" class="fr" type="warn" :width="50">删除</swipeout-button>
                  <!--<swipeout-button @click.native="onEdite(item.id)" class="fr" type="primary" :width="50">编辑</swipeout-button>-->
                  <swipeout-button @click.native="onDetail(item.id)" class="fr" type="default" :width="50">详情</swipeout-button>
                </div>
                <div slot="content" class="demo-content vux-1px-t">
                  <flexbox>
                    <flexbox-item><div class="flex-demo img">
                      <x-img default-src='' :src="item.stockImg[0].src" class="ximg-demo" error-class="ximg-error" success-class="previewer-demo-img" @click="show(0)" :offset="-100" container="#vux_view_box_body"></x-img>
                    </div></flexbox-item>
                    <flexbox-item>
                      <div class="flex-demo">
                        <flexbox orient="vertical">
                          <flexbox-item>
                            <div class="flex-demo">
                              <span>货号：{{item.id}}</span>
                            </div>
                          </flexbox-item>
                          <flexbox-item>
                            <div class="flex-demo">
                              <span>品牌：{{item.stockBrand}}</span>
                            </div>
                          </flexbox-item>
                          <flexbox-item>
                            <div class="flex-demo">
                              鞋号：<span v-for="num in item.stockStatus">{{num.size}}</span><br>
                              <!--颜色：<span v-for="tp in item.stockStatus"><o v-for="clr in tp.type">{{clr.color}}</o></span>-->
                            </div>
                          </flexbox-item>
                        </flexbox>
                      </div>
                    </flexbox-item>
                  </flexbox>
                </div>
              </swipeout-item>
            </div>
          </flexbox-item>
        </flexbox>
      </swipeout>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import { Search, Cell, XInput, XButton, Group, Flexbox, FlexboxItem, TransferDom, Swipeout, SwipeoutItem, SwipeoutButton, XImg, Divider } from 'vux'
  export default {
    components: {
      Search,
      Cell,
      XInput,
      XButton,
      Group,
      Flexbox,
      FlexboxItem,
      TransferDom,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton,
      XImg,
      Divider
    },
    name: 'dataSerch',
    data () {
      return {
        initData: [],
        results: [],
        value: ''
      }
    },
    methods: {
      onDetail (id) {
        this.$router.push({path: '/goodsDetail/' + id})
      },
      onDel (id) {
        let self = this
        this.$vux.confirm.show({
          title: '确定删除?',
          content: '',
          onCancel () {
            console.log('plugin cancel')
          },
          onConfirm () {
            $.each(self.initData, function (k) {
              if (self.initData[k].id == id) {
                self.initData.splice(k, 1)
              }
            })
            self.saveData = JSON.stringify(self.initData)
            localStorage.setItem('goods', self.saveData)
            self.onSubmit(self.value)
          }
        })
      },
      onEdite (id) {
//        this.$router.push({path: '/editDtl/' + id})
//        this.$router.push({
//          name: 'editDtl',
//          params: {
//            id: id, time: this.dateTime
//          }
//        })
      },
      setFocus () {
        this.$refs.search.setFocus()
      },
      onSubmit (val) {
        let self = this
        self.results = []
        $.each(self.initData, function (k) {
          if (self.initData[k].id.indexOf(val) !== -1 || self.initData[k].stockBrand.indexOf(val) !== -1 || self.initData[k].stockGender[0].indexOf(val) !== -1 || self.initData[k].stockStatus[0].size.indexOf(val) !== -1) {
//               || self.initData[k].stockGender[0].indexOf(val) !== -1 || self.initData[k].stockStatus[0].size.indexOf(val) !== -1
            self.results.push(self.initData[k])
          }
        })
      },
      onCancel () {
        this.results = []
      },
    },
    mounted () {

    },
    beforeMount () {
      this.initData = JSON.parse(localStorage.getItem('goods'))
    }
  }
</script>

<style scoped>
  .serch{
    margin-top: -15px;
  }
</style>
